// 由于 webpack 是基于 Node 进行构建的 所有的 webpack 的配置文件中 任何合法的Node代码都是支持的
var path = require('path')

// 在内存中 根据指定的模板页面 生成一份内存中的首页 同时 自动把打包好的 bundle 注入到页面底部
// 如果配置文件 需要在导出的对象中 挂载一个 plugin 节点
var htmlWebpackPlugin = require('html-webpack-plugin')

//当以命令形式运行 webpack 或者 webpack-dev-server 的时候 工具会发现 我们并没有提供 要打包的文件入口和出口 
// 此时 他会检查项目根目录中的配置文件 并读取这个文件 就拿到了导出的这个配置对象 然后根据这个对象 进行打包构建
module.exports = {
    entry: path.join(__dirname, './src/main.js'), //入口文件
    output: { //指定输出选项
        path: path.join(__dirname, './dist'), //输出路径
        filename: 'bundle.js' //指定输出文件的名称
    },
    plugins: [ //所有的webpack插件的配置节点
        new htmlWebpackPlugin({
            template: path.join(__dirname, './src/index.html'), //指定模板文件路径
            filename: 'index.html' //设置生成的内存页面的名称  因为只有index.html 文件名字才能默认被浏览器打开
        })
    ],
    module: { //配置所有的第三方 loader 模块
        rules: [ //第三方模块的匹配规则
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            }, //处理 css 文件的loader
            {
                test: /\.less$/,
                use: ['style-loader', 'css-loader', 'less-loader']
            }, //处理 less 文件的loader
            {
                test: /\.scss$/,
                use: ['style-loader', 'css-loader', 'sass-loader']
            }, //处理 sass 文件的loader
            {
                test: /\.(jpg|png|gif|jpeg|bmp)$/,
                use: 'url-loader?limit=1715029&name=[hash]-[name].[ext]' //因为他只需要一个 loader 来进行处理
                //所以就不需要写数组字符串即可 fill-loader是内部依赖不需要写出来
            }, //处理 图片路径 的loader
            //limit 给定的值 是图片的大小 单位是 byte 如果我们引用的是图片 大于或者等于给定的值 则不会被转为base64编码
            // 如果 图片小于 给定的 Limit 值 则会被转为 base 64的字符串   传递过去的是遗传哈希值  为了防止重名
            //name =[name] 表示原来叫什么名字  传递过去还是什么名字 .[ext] 表示后缀名也是同原来一样的  固定写法
            // 如果说name名字写出来了 但是如果名字一样内容不一样 将会被替换掉 所以我们需要在前面加一个 哈希值 [hash]-[name]-[ext]
            // [hash：8]表示放入 一个前面带有8位哈希值的一个参数  哈希值是32位的哈希值 从前面接续一个8为的哈希值放在前面
            {
                test: /\.(ttf|woff2|eot|svg|woff)$/,
                use: 'url-loader'
            }, //处理 字体文件的 loader
            {
                test: /\.js$/,
                use: 'babel-loader',
                exclude: /node_modules/
            }, //处理babel 来转换高级的es语法
            {
                test: /\.vue$/,
                use: 'vue-loader'
            } //这是处理vue的loader
        ]
    }
}